iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 9
1
Modern Web

使用 React 製作簡易專案管理網站:從基礎到實戰系列 第 9

[Day 9] ES6 前哨戰 - import/export

  • 分享至 

  • xImage
  •  

前言

ES6 引進模組系統,透過 import/export 語法,讓開發者可以將 JavaScript 程式碼模組化,提供一種更易於組織與管理程式碼的方式。

export 輸出模組

輸出模組的方式分為兩種,一種是預設輸出(default),另外一種是名稱輸出(named),每個模組只能有一個預設輸出,但可以有多個名稱輸出。

預設輸出(default)

我們可以同時宣告並且輸出變數或是函式:

export default const a = 1;
export default function() b{};

如果已經事先宣告好要輸出的變數或是函式,則可以直接輸出該變數名稱或函式名稱:

const a = 1;

export default a;
fuction b() {}

export default b;

名稱輸出(named)

我們可以同時宣告並且輸出變數或是函式:

export const a = 1;
export function() b{};

如果已經事先宣告好要輸出的變數或是函式,則透過物件的方式輸出多個變數名稱或函式名稱:

const a = 1;
function() b{};

export { a, b };

我們也可以修改變數或函式的輸出名稱:

const a = 1;
function() b{};

export { a as newA, b as newB };

混合預設輸出與名稱輸出

const a = 1;
function() b{};

export { a as default, b };

以上例子中,變數 a 為預設出書,函式 b 則為名稱輸出。

import 輸入模組

輸入模組的來源分為兩種,就是前面提到的預設輸出(default)與名稱輸出(named),每個模組輸入的數量是沒有限制的。

輸入來源為「預設輸出(default)」

如果輸入來源為「預設輸出(default)」,我們可以自訂輸入的變數名稱:

import 自訂變數名稱 from '模組路徑';

例如有一個 A.js 模組內容如下:

const a = 1;
export default a;

則我們可以在同資料夾底下的模組輸入:

import aaa from './A.js'

以上例子中,雖輸出的變數名稱為 a,但在輸入時可以使用自訂的變數名稱 aaa。

輸入來源為「名稱輸出(named)」

如果輸入來源為「名稱輸出(named)」,輸入的變數名稱要和輸出的名稱相同:

import { 原輸出變數名稱1, 原輸出變數名稱2, ... } from '模組路徑';

例如有一個 A.js 模組內容如下:

const a = 1;
function b() {};

export { a, b };

則我們可以在同資料夾底下的模組輸入:

import { a, b } from './A.js'

以上例子中,分別輸出變數 a 與函式 b,所以在輸入時必須使用同名的變數與函式名稱。

輸入來源為混合「預設輸出」與「名稱輸出」

如果輸入來源為同時有「預設輸出」與「名稱輸出」,也可以同時輸入:

import 自訂預設輸入變數名稱, { 原輸出變數名稱1, 原輸出變數名稱2, ... } from '模組路徑';

例如有一個 A.js 模組內容如下:

const a = 1;
function() b{};

export { a as default, b };

則我們可以在同資料夾底下的模組輸入:

import a, { b } from './A.js'

總結

到本篇文章為止,我們把之後使用 React 開發專案會用到的 ES6 語法介紹過一遍,這邊再額外列出一些也很實用的語法:預設參數字串模板類別,接下來會介紹一連串的 React 基礎用法與觀念囉!


上一篇
[Day 8] ES6 前哨戰 - arrow function
下一篇
[Day 10] React 保衛戰 - 別怕!JSX 不過是個語法糖!而且還是個晶晶體?!
系列文
使用 React 製作簡易專案管理網站:從基礎到實戰30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
PeterLiao
iT邦新手 4 級 ‧ 2020-03-16 17:42:28

寫得好清楚,辛苦谷歌~
幫個勘誤:

混合預設輸出與名稱輸出
// ...
以上例子中,變數 a 為預設「出書」,函式 b 則為名稱輸出。
import 輸入模組

我要留言

立即登入留言